<template>
  <div>
    <DocHeader :title="data.title" fromDoc="obligationsAndRights" />
    <div class="docMain">
      1、患者的权利<br />
      （1）获得基本医疗保健的权利<br />
      （2）人格受到尊重的权利<br />
      （3）知情同意权<br />
      （4）隐私权<br />
      （5）拒绝治疗权<br />
      （6）有对医院的批评建议权<br />
      （7）对医疗争议有请求鉴定权、调解权和诉讼权<br />
      2、患者的义务<br />
      （1）如实陈述病情的义务<br />
      （2）配合医院和医务人员进行一切检查治疗的义务<br />
      （3）支付医疗费用及其他服务费用的义务<br />
      （4）尊重医务人员的劳动及人格尊严的义务<br />
      （5）遵守医院规章制度的义务<br />
      （6）不影响他人治疗，不将疾病传染给他人的义务<br />
      （7）爱护医院公共财物的义务<br />
    </div>
    <div class="flexBox">
      <div class="item">患者（家属）签名：</div>
      <div class="item">与患者的关系：</div>
    </div>
    <div class="flexBox">
      <div class="item">
        护士签名：
        <img
          v-if="signPhoto(sign, 'nursingDocument', data.type)"
          :src="
            'data:image/png;base64,' +
            signPhoto(sign, 'nursingDocument', data.type)
          "
          alt=""
          style="display: block; max-width: 98%; height: 24px"
          @click="handleSignImgClear"
        />
        <el-input
          v-else
          v-model="sign"
          style="width: 100px"
          @blur="handleSignInputBlur"
        ></el-input>
      </div>
      <div class="item">
        告知时间：
        <DateSelection
          v-model="time"
          value-format="yyyy-MM-dd HH:mm"
          :simple-op="true"
          :date-picker-show="true"
          :date-show="true"
          :no-clear="true"
          :hasBorder="false"
          :needTimeIcon="false"
          :display-num="!time"
          style="padding: 0"
        />
      </div>
    </div>
    <!-- <div class="flexBox">
      <div class="item"></div>
      <div class="item" style="text-align: right">{{ hospitalName }}</div>
    </div> -->
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    patCur: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      sign: '',
      time: +new Date()
    })

    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function handleSignInputBlur() {
      queryUserSignByName([state.sign], 'nursingDocument', props.data.type)
    }

    function handleSignImgClear() {
      state.sign = ''
    }

    watch(
      user,
      val => {
        if (val) {
          queryUserSignByName([val.name], 'nursingDocument', props.data.type)
          state.sign = val.name
        }
      },
      {
        immediate: true
      }
    )

    return {
      ...toRefs(state),
      signPhoto,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
.docMain {
  line-height: 2em;
  margin-top: 10px;
  margin-bottom: 100px;
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
  margin-top: 60px;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    border-bottom: 1px solid #000;
    padding: 0 4px;
    color: #000;
  }
}
</style>
